<template>
	<view class="body">
		<view class="header">
			<cu-custom bgImage="" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">每天一个</block>
			</cu-custom>
		</view>
		
		<view class="box" >
			<unicloud-db v-slot:default="{ data, loading, error, options }" orderby='One_id desc' collection="one-daily-articles">
				<view v-if="error">{{ error.message }}</view>
				<view v-else>
					<view class="item-list" >
						
						<view  class="item"  v-for="(item, i) in data" :key="i">
							<view class="home-img" :style="{'background-image':`url(${item.imgurl})`}"></view>
							<view class="sentence-bg"></view>
							<view class="content-box">
								<view class="content">
									<view class="link-div">
										<view class="p day">
											{{ item.date|dayFilter}}
										</view>
										<view class="p month">
											<!-- VOL.3202 | Jul. 2021 -->
											{{item.date|monthFilter}}
											 
										</view>
										<view class="p text-content-short">
											{{item.word}}
											
										</view>
										
									</view>
								</view>
								<view class="down-icon">
									<view class="home-anchor-div">
										<view class="anchor-link">
											
											<img class='one-image-exclude' src="@/static/images/down.png" alt="">
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</unicloud-db>
		</view>
	</view>
</template>

<script>
export default {
	filters:{
		dayFilter:(val)=>{
			val=val.split('-')
			return val[val.length-1]
		},
		monthFilter:(val)=>{
			let date=new Date(val).toDateString()
			date= date.split(' ')
			return date[1]+' '+date[3]
			
		}
		
	},
	data() {
		return {
			tabbarHeight:0,
			imgurl:'https://images.weserv.nl/?url=http://image.wufazhuce.com/FrRWcvUFmVWaakli3H1IrdHW9VMY'
		};
	},
	methods: {
		
		
	},
	onLoad() {
		
	}
};
</script>

<style lang="scss">
.body {
	position: relative;
	.header{
		width: 100%;
		height: 120rpx;
		// position: absolute;
		top: 0;
		z-index: 100;
	}
	.box {

		
		.item-list {

			// height: calc(100vh - 120rpx) ;
			height:100vh;
			width: 100%;
			position: absolute;
			top: 0;

			.item {
				height:100vh;
				position: relative;
				
				.home-img{
						z-index: -2;
					    position: absolute;
					    width: 100%;
					    height: 100%;
					    padding: 0;
					    margin: 0;
					    background: no-repeat center center;
					    background-size: cover;
				}
				.sentence-bg{
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: -1;
					    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
					    
				}
				.content-box{
					position: absolute;
					bottom: 0;
					.link-div{
						
						.p{
								color: white;
							    text-align: left;
								margin: 0 40rpx;
						}
						.day{
								font-size: 96rpx;
							    line-height: 96rpx;
							    margin-bottom: 0rpx;
							    font-family: Serif;
						}
						.month{
								font-size: 40rpx;
								line-height: 40rpx;
								font-weight: normal;
								margin-top: 22rpx;
						}
						.text-content-short{
							font-weight: normal;
								line-height: 52rpx;
							    max-height: 156rpx;
							    margin-top: 28rpx;
							    overflow: hidden;
							    text-overflow: ellipsis;
							    
							    display: -webkit-box;
								line-clamp: 3;
								box-orient: vertical;
							    
						}
					}
					
					.down-icon{
						margin-top: 10rpx;
						.home-anchor-div{
								width: 100%;
							    z-index: 9;
							    height: 50rpx;
								.anchor-link {
									text-align: center;
									.one-image-exclude{
											width: 46rpx;
										    height: 24rpx;
										    // padding: 10px 30px 10px 30px;
										    // padding-left: 30px;
										    // padding-right: 30px;
										    // padding-top: 6px;
										    // padding-bottom: 6px;
									}
								}
						}
					}
				}
				
				

				
			}
			
			
			
		}
	}
}
</style>
